<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jet-CMS | Content</title>
    <link type="text/css" rel="stylesheet" th:href="@{/pure-min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/main.css}" />
    <script type="text/javascript" th:src="@{/main.js}"></script>
    <script type="text/javascript" th:src="@{/vue-min.js}"></script>
    <style>
        body {
            background-color: #eee;
        }
        #noteEditor {
            font-size:16px;
            color:#666;
            min-height: 460px;
            height: auto;
            width:100%;
            padding:10px;
            background: #fff;
            outline:none;
        }
        #noteEditor textarea {
            border: 1px solid #eee;
        }
        .edit-menu {
            background-color: #f6f6f6;
            padding-top: 20px;
            height: 460px;
        }
        .cbtn-list {
            margin-top: 10px;
            text-align: center;
        }
        .btn-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.9;
            margin-top: 10px;
            margin-right: 5px;
        }
        .btn-color:hover {
            opacity: 1.0;
        }
        textarea {
            width: 100%;
        }
        .input-wrap {
            padding: 10px;
        }
        .input-wrap input {
            text-align: center;
        }
        .legends {
            text-align: center;
            font-size: 16px;
            color: #0095cf;
            margin-bottom: 10px;
        }
        .tables td {
            text-align: center;
        }
        .tables tr td:first-child {
            width: 30%;
        }
        .tables tr td:last-child {
            width: 80px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span th:include="home/_nav"></span>
        <div class="container">
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <div class="edit-menu">
                        <div class="cbtn-list">
                            <button v-on:click="codeView()" type="button" class="pure-button" v-bind:class="{'btn-blue': codeMode}">代码模式</button>
                            <button v-on:click="writeContent()" type="button" class="pure-button btn-orange" v-if="timerCount>0">保存 {{timerCount}} <small>s</small></button>
                            <button v-on:click="writeContent()" type="button" class="pure-button" v-else>保存</button>
                        </div>
                        <span v-if="!codeMode">
                            <div class="cbtn-list">
                                <button v-on:click="documentOpt(1)" type="button" class="pure-button">大标题</button>
                                <button v-on:click="documentOpt(2)" type="button" class="pure-button">中标题</button>
                                <button v-on:click="documentOpt(3)" type="button" class="pure-button">小标题</button>
                            </div>
                            <div class="cbtn-list">
                                <button v-on:click="documentOpt(4)" type="button" class="pure-button">左对齐</button>
                                <button v-on:click="documentOpt(5)" type="button" class="pure-button">居中</button>
                                <button v-on:click="documentOpt(6)" type="button" class="pure-button">右对齐</button>
                            </div>
                            <div class="cbtn-list">
                                <button v-on:click="documentOpt(7)" type="button" class="pure-button">粗体</button>
                                <button v-on:click="documentOpt(8)" type="button" class="pure-button">斜体</button>
                            </div>
                            <div class="cbtn-list">
                                <button v-on:click="insertFileMode=true" type="button" class="pure-button">插入资源</button>
                                <button v-on:click="insertTableMode=true" type="button" class="pure-button">插入表格</button>
                            </div>
                            <div class="cbtn-list">
                                <a v-on:click="setColor('666666')" href="javascript:;" class="btn-color" style="background-color:#666666;box-shadow:0 0 3px #666666;"></a>
                                <a v-on:click="setColor('FF6666')" href="javascript:;" class="btn-color" style="background-color:#FF6666;box-shadow:0 0 3px #FF6666;"></a>
                                <a v-on:click="setColor('0099CC')" href="javascript:;" class="btn-color" style="background-color:#0099CC;box-shadow:0 0 3px #0099CC;"></a>
                                <a v-on:click="setColor('FFCC00')" href="javascript:;" class="btn-color" style="background-color:#FFCC00;box-shadow:0 0 3px #FFCC00;"></a>
                                <a v-on:click="setColor('669933')" href="javascript:;" class="btn-color" style="background-color:#669933;box-shadow:0 0 3px #669933;"></a>
                                <a v-on:click="setColor('996600')" href="javascript:;" class="btn-color" style="background-color:#996600;box-shadow:0 0 3px #996600;"></a>
                                <a v-on:click="setColor('993399')" href="javascript:;" class="btn-color" style="background-color:#993399;box-shadow:0 0 3px #993399;"></a>
                            </div>
                        </span>
                    </div>
                </div>
                <div class="pure-u-3-4">
                    <div id="noteEditor" v-bind:contenteditable="editable"></div>
                </div>
            </div>
        </div>
        <transition name="fade">
            <div class="modal" v-show="insertTableMode">
                <div class="modal-wrap" style="width:600px;">
                    <div class="modal-title">插入表格</div>
                    <div class="modal-content">
                        <div class="pure-g">
                            <div class="pure-u-1-3">
                                <div class="input-wrap">
                                    <legend class="legends">表格行数</legend>
                                    <input type="text" class="input" v-model="tableData.rows" />
                                </div>
                            </div>
                            <div class="pure-u-1-3">
                                <div class="input-wrap">
                                    <legend class="legends">表格列数</legend>
                                    <input type="text" class="input" v-model="tableData.cols" />
                                </div>
                            </div>
                            <div class="pure-u-1-3">
                                <div class="input-wrap">
                                    <legend class="legends">是否包含表头</legend>
                                    <input type="checkbox" style="width:100%;margin-top:20px;" v-model="tableData.head" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button v-on:click="insertTableMode=false" type="button" class="pure-button">关闭</button>
                        <button v-on:click="insertTable" type="button" class="pure-button btn-green">插入表格</button>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div class="modal" v-show="insertFileMode">
                <div class="modal-wrap" style="width:600px;">
                    <div class="modal-title">插入资源</div>
                    <div class="modal-content">
                        <table class="table tables">
                            <tr v-for="item in fileList">
                                <td>{{item.name}}</td>
                                <td>{{item.path}}</td>
                                <td><button v-on:click="insertFile(item.path)" type="button" class="pure-button btn-sm btn-green">插入文件</button></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button v-on:click="insertFileMode=false" type="button" class="pure-button">关闭</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</body>
<script>
    const TIME_LIMIT = 30;
    const vue = new Vue({
        el: '#app',
        data: {
            id: '[[${cid}]]',
            editable: false,
            codeMode: false,
            insertTableMode: false,
            insertFileMode: false,
            fileList: [],
            tableData: {
                head: true,
                rows: 3,
                cols: 4
            },
            noteEditor: null,
            timerCount: 0,
            timer: null
        },
        methods: {
            init: function() {
                this.noteEditor = document.getElementById('noteEditor');
                this.noteEditor.onkeyup = function() {
                    vue.writeReady();
                };
                httpRequest(
                    '/content/get.do/id/' + vue.id, null,
                    function(res) {
                    if (res.code == 1) {
                        vue.editable = true;
                        vue.noteEditor.innerHTML = res.result.detail;
                    } else {
                        vue.noteEditor.innerHTML = res.error;
                    }
                }, 'json');
                httpRequest(
                    '/resource/getList.do',
                    {offset: 0, limit: 50, bid: vue.id},
                    function(res) {
                        if (res.code == 1) {
                            vue.fileList = res.result;
                        }
                    },
                    'json'
                );
            },
            codeView: function() {
                this.codeMode = !this.codeMode;
                if (this.codeMode) {
                    this.editable = false;
                    let content = this.noteEditor.innerHTML;
                    this.noteEditor.innerHTML = '<textarea rows="22">'
                        + content.replace(/\<div\>\<br\>\<\/div\>/g, '<br>')
                        + '</textarea>';
                } else {
                    this.noteEditor.innerHTML = document.getElementsByTagName('textarea')[0].value;
                    this.editable = true;
                }
            },
            documentOpt: function(index) {
                switch (index) {
                    case 1:
                        document.execCommand('insertHTML', false, '<div class="content-title-xl">大号内容标题</div><br>');
                        break;
                    case 2:
                        document.execCommand('insertHTML', false, '<div class="content-title-md">中号内容标题</div><br>');
                        break;
                    case 3:
                        document.execCommand('insertHTML', false, '<div class="content-title-sm">小号内容标题</div><br>');
                        break;
                    case 4:
                        document.execCommand('justifyLeft');
                        break;
                    case 5:
                        document.execCommand('justifyCenter');
                        break;
                    case 6:
                        document.execCommand('justifyRight');
                        break;
                    case 7:
                        document.execCommand('bold');
                        break;
                    case 8:
                        document.execCommand('italic');
                        break;
                }
                this.writeReady();
            },
            setColor: function(color) {
                document.execCommand('foreColor', false, '#'+color);
            },
            insertTable: function() {
                let pattern = /^\d+$/;
                let rows = this.tableData.rows;
                let cols = this.tableData.cols;
                if (!pattern.test(rows) || rows < 0) {
                    alert('行数必须填写正整数');
                    return;
                }
                if (!pattern.test(cols) || cols < 0) {
                    alert('列数必须填写正整数');
                    return;
                }
                let html = '';
                let ths = '';
                let tds = '';
                while (cols) {
                    ths += '<th></th>';
                    tds += '<td></td>';
                    cols--;
                }
                if (this.tableData.head) {
                    html += '<thead><tr>' + ths + '</tr></thead>';
                }
                html += '<tbody';
                while (rows) {
                    html += '<tr>' + tds + '</tr>';
                    rows--;
                }
                document.execCommand('insertHTML', false, '<table class="content-table">' + html + '</tbody></table><br>');
                this.insertTableMode = false;
            },
            insertFile: function(path) {
                let type = path.substr(path.lastIndexOf('.')+1);
                let insertContent = '';
                if (isImage(type)) {
                    insertContent = '<p class="content-image"><img src="/resource/output/'+path+'"></p><br>';
                } else {
                    insertContent = '<p class="content-file"><a href="/resource/output/'+path+'" target="_blank">文件下载</a></p><br>';
                }
                document.execCommand('insertHTML', false, insertContent);
                this.insertFileMode = false;
            },
            writeContent: function() {
                let content;
                if (this.codeMode) {
                    content = document.getElementsByTagName('textarea')[0].value;
                } else {
                    content = this.noteEditor.innerHTML;
                }
                httpRequest(
                    '/content/saveDetail.do',
                    {id: vue.id, detail: content},
                    function(res) {},
                    'json'
                );
                vue.timerCount = 0;
                if (vue.timer != null) {
                    clearInterval(vue.timer);
                    vue.timer = null;
                }
            },
            writeReady: function() {
                if (this.timerCount == 0) {
                    this.timerCount = TIME_LIMIT;
                }
                if (this.timer == null) {
                    this.timer = setInterval(() => {
                        if (--vue.timerCount == 0) {
                            vue.writeContent();
                        }
                    }, 1000);
                }
            },
        }
    });
    vue.init();
</script>
</html>